import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式

// 自定义指令插件
export default {
  install (Vue) {
    Vue.directive('myfocus', {
      // 自动获取输入框的焦点
      inserted (el) {
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          // 如果直接是input标签/textarea标签
          el.focus()
        } else {
          // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
          const inp = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          // 如果找到了
          if (inp || textArea) {
            inp && inp.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      }
    })
    // 代码高亮显示
    Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
      const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
      highlight.forEach((block) => {
        hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
      })
    })
  }
}
